<template>
  <view class="obc">
    <view class="obody">
      <view class="ol">
        <image class="pic" :src="data.extend.pic" mode="aspectFill"></image>
      </view>
      <view class="or" @click="todetail">
        <view class="on">
          {{ data.content }}
        </view>
        <view class="op">
          <view>￥{{ data.extend.sell_price }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
var app = getApp();
export default {
  props: {
    data: {
      type: Object,
      default: () => {},
    },
    right: Boolean,
  },
  data() {
    return {};
  },
  computed: {},
  methods: {
    todetail() {
      if (this.data.extend.proid) {
        app.goto(
          "/pages/shop/product?id=" +
            this.data.extend.proid +
            "&ptype=" +
            this.data.extend.ptype
        );
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.obc {
  background-color: #fff;
  border-radius: 16rpx;

  .obt {
    .oid {
      color: gray;
      font-size: 24rpx;
      text-wrap: wrap;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-align: left;
      margin-left: 10rpx;
    }

    .otype {
      position: absolute;
      top: 0;
      margin-right: 10rpx;

      .st0 {
        width: 140rpx;
        color: #ff8758;
        text-align: right;
      }

      .st1 {
        width: 140rpx;
        color: #ffc702;
        text-align: right;
      }

      .st2 {
        width: 140rpx;
        color: #ff4246;
        text-align: right;
      }

      .st3 {
        width: 140rpx;
        color: #999;
        text-align: right;
      }

      .st4 {
        width: 140rpx;
        color: #bbb;
        text-align: right;
      }
    }
  }

  .obody {
    display: flex;
    gap: 10rpx;
    justify-content: center;
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 10rpx;
    width: 70vw;
    direction: ltr;

    .ol {
      width: 120rpx;
      height: 120rpx;

      image {
        width: 120rpx;
        height: 100%;
        border-radius: 16rpx;
        margin: auto;
      }
    }

    .or {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .on {
        font-size: 30rpx;
        text-wrap: wrap;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .op {
        color: #ff4246;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
